<template>
  <div style="height: 500px">
    <el-button @click="dialogFormVisible = true" style="margin-left: 20px;margin-top: 20px" type="primary" plain>添加今日工作目标</el-button>

    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%;"
      height="560">
      <el-table-column
        prop="createTime"
        label="添加时间"
        width="300"
        sortable>
      </el-table-column>
      <el-table-column label="级别" width="300">
        <template slot-scope="props">
          <el-tag type="info" v-if="props.row.type === 1" effect="dark">
            普通
          </el-tag>
          <el-tag type="success" v-if="props.row.type === 2" effect="dark">
            重要
          </el-tag>
          <el-tag type="danger" v-if="props.row.type === 3" effect="dark">
            非常重要
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="主要内容">
      </el-table-column>
      <el-table-column width="200" label="操作">
        <template slot-scope="props">
          <el-popconfirm
            confirm-button-text='确定'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            @confirm="handleDelete(props.$index)"
            title=" 确定要删除该工作目标吗？ "
          >
           <el-button
             style="margin-right: 60px"
             type="danger"
             size="mini"
             icon="el-icon-delete"
             slot="reference" plain>删 除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="text-align:center;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.params.page"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="this.params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </div>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible"  @close="handleClose">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="工作级别" label-width="120px" prop="type">
          <el-select v-model="form.type" placeholder="请选择工作级别">
            <el-option label="普通" value="1"></el-option>
            <el-option label="重要" value="2"></el-option>
            <el-option label="非常重要" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="padding-right: 100px" label="主要内容" label-width="120px" prop="content">
          <el-input :rows="8" type="textarea" v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDailyWork">确 定 保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {AddDailyWork, DeleteDailyWork, ListDailyWork} from "@/api/worker";
  import config from "@/config";

  export default {

    data() {
      return {
        rules: {
          type: [
            { required: true, message: '请选择工作级别！', trigger: ['blur','change'] }
          ],
          content: [
            { required: true, message: '请填写主要内容！', trigger: 'blur' }
          ],
        },
        loading: false,
        list: [],
        dialogFormVisible: false,
        form: {
          type: '',
          content: '',
        },
        total: 0,
        params: {
          page: 1,
          limit: 10,
        },
      }
    },

    mounted() {
      this.listDailyByPage();
    },

    methods: {

      loadList() {
        this.loading = true;
        ListDailyWork().then(res => {
          setTimeout(() => {
            this.list = res.data
            this.loading = false
          }, 300)
        })
      },

      saveDailyWork() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            AddDailyWork(this.form).then(res => {
              this.dialogFormVisible = false
              this.loadList()
              this.$message({
                type: 'success',
                message: '保存成功!'
              });
            })
          } else {
            this.$message.error('请先完善表单相关信息！');
            return false;
          }
        });

      },

      handleDelete(index) {
        DeleteDailyWork(this.list[index].id).then(res => {
          this.list.slice(index, 1)
          this.loadList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      },

      handleClose(){
        this.$refs.form.resetFields();
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.params.limit = val;
        this.listDailyByPage();
      },

      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.params.page = val;
        this.listDailyByPage();
      },

      listDailyByPage:function(){
        this.$axios({
          method: 'get',
          url: config.API_URL + "/daily/page?page=" + this.params.page + "&limit=" + this.params.limit,
          headers: {
            "Authorization": localStorage.getItem("token")
          },
        })
          .then((res) => {
            console.log(res.data);
            this.list = res.data.data.list;
            this.total = res.data.data.total;
          });
      },


    }

  }
</script>

<style scoped>

</style>
